<template>
    <div>
        <div class="nav">
            <div class="sort">
                <span @click="changeSort" id="hot">
                    热门
                    <i class="iconfont"
                        :style="{ transform: isRotated ? 'rotate(180deg)' : 'rotate(0deg)' }">&#xe602;</i>
                </span>
                <span>
                    地区
                    <i class="iconfont">&#xe602;</i>
                </span>
            </div>
            <div class="mySearch">
                <mySearch :placeholder="'搜索店铺'"></mySearch>
            </div>
        </div>
        <div class="catList">
            <div class="catList-container swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide active" @click="clickCatList(0, 0)">
                        <i class="iconfont">&#xe648;</i>
                        <span class="title">所有分类</span>
                    </div>
                    <div class="swiper-slide" v-for="(item, index) in catList" :key="index"
                        @click="clickCatList(index + 1, item.cat_id)">
                        <img :src="item.touch_icon" alt="">
                        <span class="title">{{ item.cat_name }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="catShopList">
            <LoadingSpinner v-if="isLoading"></LoadingSpinner>
            <catShopListSwiper :data="catShopList" v-else></catShopListSwiper>
        </div>
    </div>
</template>

<script>
import { PostData } from '@/api'
import MySearch from './mySearch.vue'
import Swiper from 'swiper'
import CatShopListSwiper from './catShopListSwiper.vue'
import LoadingSpinner from './LoadingSpinner.vue'
export default {
    data() {
        return {
            catList: null,
            catShopList: null,
            swiper: null,
            currentIndex: 0,
            currentCatId: 0,
            isLoading: true,
            sort: 'sort_order',
            order: 'ASC',
            isRotated: false
        }
    },
    components: {
        MySearch,
        CatShopListSwiper,
        LoadingSpinner
    },
    async created() {
        this.catList = await PostData('/shop/catlist')
        const jsonData = {
            cat_id: 0,
            warehouse_id: 0,
            area_id: 0,
            size: 10,
            page: 1,
            sort: this.sort,
            order: this.order,
        }
        this.catShopList = await PostData('/shop/catshoplist', jsonData)
        this.isLoading = false

    },
    mounted() {
        this.$nextTick(() => {
            this.initSwiper()
        })

    },
    methods: {
        initSwiper() {
            this.swiper = new Swiper('.catList-container', {
                slidesPerView: 'auto',
                spaceBetween: 5,
                freeMode: true,
                freeModeSticky: true,
                observer: true, // 关键配置：监听 DOM 变化
                observeParents: true // 关键配置：监听父容器变化
            })
        },
        async clickCatList(index, cat_id) {
            if (index == this.currentIndex) return
            this.isLoading = true
            this.currentIndex = index
            this.currentCatId = cat_id
            document.querySelector('.swiper-slide.active').classList.remove('active')
            document.querySelectorAll('.catList-container .swiper-slide')[index].classList.add('active')
            this.catShopList = await this.getCatShopList(cat_id)
            this.isLoading = false
        },
        async getCatShopList(cat_id) {
            const jsonData = {
                cat_id,
                warehouse_id: 0,
                area_id: 0,
                size: 10,
                page: 1,
                sort: this.sort,
                order: this.order,
            }
            return await PostData('/shop/catshoplist', jsonData)
        },
        changeSort() {
            const hot = document.querySelector('#hot')

            if (this.sort == 'sort_order') {
                this.sort = 'sort'
                this.order = 'DESC'
                hot.classList.add('active')
                this.isRotated = true
                this.reLoad()
                return
            }
            if (this.sort == 'sort') {
                if (this.order == 'DESC') {
                    this.order = 'ASC'
                    this.isRotated = false
                    this.reLoad()
                    return
                }
                if (this.order == 'ASC') {
                    this.order = 'DESC'
                    this.isRotated = true
                    this.reLoad()
                    return
                }
            }
        },
        async reLoad() {
            this.isLoading = true
            this.catShopList = await this.getCatShopList(this.currentCatId)
            this.isLoading = false
        }
    }
}
</script>

<style scoped>
.nav {
    width: 100%;
    height: 16vw;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .sort {
        width: 40vw;
        display: flex;
        justify-content: space-around;

        span {
            font-size: 4vw;
            height: 5.8667vw;
            line-height: 5.8667vw;

            i.iconfont {
                font-size: 3.2vw;
                color: #ccc;
                display: inline-block;
            }
        }

        span.active {
            color: red;

            i.iconfont {
                color: red;
            }
        }
    }

    .mySearch {
        width: 40vw;

        mySearch {
            width: 150px;
        }
    }
}

.catList {
    width: 94.6667vw;
    margin: 2.6667vw auto;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}



.catList-container {
    width: 94.6667vw;
    height: 20vw;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.catList-container .swiper-slide {
    width: 20vw;
    height: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    border-radius: 1.3333vw;

    i.iconfont {
        font-size: 10.6667vw;
    }

}

.catList-container .swiper-slide.active .title {
    color: red;
}

.catList-container img {
    width: 10.6667vw;
    height: 10.6667vw;
}

.catList-container span {
    font-size: 3.2vw;
    display: block;
}
</style>